<!--
 * @Author: 秦福凯
 * @Date: 2024-08-12 09:08:12
 * @Description: 教师个人信息组件
 * @FilePath: \研发云实验小学OA\sx-school-oa\sx-school-oa\src\components\common\idCard\idCard.vue
-->
<template>
  <u-dialog v-bind="$attrs" width="85%" :title="$attrs.title || '教工信息'" class="u-common-teacher-idCard-info">
   <div class="title">
    {{cardTitle}}
   </div>
   
   <div class="content">
    <div class="top">
      <div class="left">
        <u-form v-if="refrashForm" ref="refform"  :element="formlistcopy" :form="form"></u-form>
      </div>
      <div class="right">
        <el-image style="height: 200px;width: 160px;border: 1px solid;" :src="imgsrc" :preview-src-list="[imgsrc]">
          <template #error>
            <div class="image-slot" style="display: flex;align-items: center;justify-content: center;height: 100%;">
              <span v-if="!imgsrc">暂无图片</span>
            </div>
          </template>
        </el-image>
      </div>
    </div>

    <div class="bottom">
      <u-form v-if="refrashForm" @fileUpload="fileUpload" ref="refform2"  :element="formlistcopy2" :form="form2"></u-form>
    </div>

    <div class="footer" v-if="isCheck">
      <div class="footer-box" v-for="(item,index) in footerList">
        <div class="header">
          {{item.label}}
          <!-- <span style="color: blue;font-size: 14px;cursor: pointer;margin-left: 28px;" @click="addFooter(item.key)">添加...</span> -->
        </div>
        <div class="footer-conternt">
          <u-table v-loading="footerLoading[item.key]" :colunm="footerForm[item.key]" :data="merbersTabData"></u-table>
        </div>
      </div>
      </div>
  </div>
  </u-dialog>
</template>

<script setup>
import { ref, reactive} from 'vue'
// import Tea_grop_servic from '@/api/TeachersManagement'
// import {baseapi} from '@/api/baseapi.ts'

let props = defineProps({
  cardTitle:{
    type:String,
    default:'教职工个人信息'
  },
  isCheck:{
    type:Boolean,
    default:false
  }
})
// onMounted(() => {
//   formlist2  = JSON.parse(JSON.stringify(formlistcopy2)) 
//   formlist  = JSON.parse(JSON.stringify(formlistcopy)) 
// })
// 照片
let sexData = [
  {label:'男',id:''},
  {label:'女',id:''},
]

let imgsrc = ref('')

let refform = ref(null)
let form = reactive({

})
let refform2 = ref(null)
let form2 = reactive({

})
let formlistcopy = reactive([
  {label:'教工编号:',key:'basicId',type:'span',sp:8, lw:'88px'},
  {label:'姓名:',key:'userNo', type:'span',sp:8, lw:'68px'},
  {label:'曾用名:',key:'idCard', type:'span',sp:8,lw:'78px'},

  {label:'性别:',key:'idCard', type:'span',sp:8, lw:'68px',data:sexData},
  {label:'名族:',key:'idCard', type:'span',sp:8, data:[],lw:'68px'},
  {label:'婚姻状态:',key:'a1', type:'span',sp:8, data:[],lw:'88px'},

  {label:'身份证号:',key:'a1', type:'span',sp:12, lw:'88px'},
  {label:'户籍地:',key:'a1', type:'span',sp:12, lw:'78px'},

  {label:'家庭住址:',key:'a1', type:'span',sp:12, lw:'88px'},
  {label:'籍贯:',key:'a1', type:'span',sp:12, lw:'68px'},

  {label:'电话:',key:'userNo', type:'span',sp:8,lw:'68px'},
  {label:'QQ号:',key:'', type:'span',sp:8,lw:'68px'}, 
  {label:'电子邮箱:',key:'', type:'span',sp:8,lw:'88px'},

])
let formlistcopy2 = reactive([
  {label:'出生日期:',key:'basicId', type:'span',sp:6, lw:'88px'},
  {label:'工作状态:',key:'1', type:'span',sp:6,lw:'88px', },
  {label:'岗位类别:',key:'1', type:'span',sp:6,lw:'88px', },
  // {label:'上传图片',key:'basicId',type:'fileBtn',sp:6,lw:'88px'},

  {label:'入校时间:',key:'basicId', type:'span',sp:6, lw:'88px'},
  {label:'参工时间:',key:'basicId', type:'span',sp:6, lw:'88px'},
  {label:'从教时间:',key:'basicId', type:'span',sp:6, lw:'88px'},
  {label:'工作单位:',key:'userNo', type:'span',sp:6, lw:'88px'},

  {label:'单位职位:',key:'1', type:'span',sp:6,lw:'88px', },
  {label:'劳动合同:',key:'1', type:'span',sp:6,lw:'88px', },
  {label:'月均工资:',key:'a1', type:'span',sp:6,lw:'88px'},
  {label:'五险一金:',key:'1', type:'span',sp:6,lw:'88px', },

  {label:'教师来源:',key:'1', type:'span',sp:6,lw:'88px', },
  {label:'政治面貌:',key:'1', type:'span',sp:6,lw:'88px', },
  {label:'加入时间:',key:'basicId', type:'span',sp:6, lw:'88px'},
  {label:'党派职务',key:'a1', type:'span',sp:6,lw:'88px'},


  {label:'健康状况:',key:'1', type:'span',sp:6,lw:'88px',},
  {label:'配偶姓名::',key:'a1', type:'span',sp:6,lw:'88px'},
  {label:'配偶性别',key:'idCard', type:'span',sp:6,lw:'88px',data:sexData},
  {label:'配偶单位:',key:'a1', type:'span',sp:6,lw:'88px'},

  {label:'个人其他情况简介:',key:'remake',type:'textarea',sp:24,placeholder:"",lw:168,disabled:true},

])
let formlist = reactive([
])
let formlist2 = reactive([
  
])


function fileUpload(file){
  return
  let params = new FormData();
  params.append('file', file.raw)
}

function addFooter(index){
  console.log(index);
}


let footerList = reactive([
  {label:'第1项：家庭成员信息 ',key:'f1'},
  {label:'第2项：学历、学位提升信息 ',key:'f2'},
  {label:'第3项：工作经历信息',key:'f3'},
  {label:'第4项：荣誉、证书信息 ',key:'f4'},
  {label:'第5项：职称资格、聘任信息 ',key:'f5'},
  {label:'第6项：个人参赛获奖信息',key:'f6'},
  {label:'第7项：个人参加培训信息',key:'f7'},

])

let footerLoading = {
  f1:false,
  f2:false,
  f3:false,
  f4:false,
  f5:false,
  f6:false,
  f7:false,
}
// 表格信息
let footerForm =  {
  // 家庭成员
  f1:reactive([
    {label:'关系',key:'schoolName',minWidth:60,},
    {label:'姓名',key:'auditUser',minWidth:60,},
    {label:'性别',key:'examineState',width:60},
    {label:'身份证号',key:'getDate',width:260},
    {label:'名族',key:'level',width:80},
    {label:'工作单位',key:'level',width:160},
    {label:'联系电话',key:'level',width:180},
    {label:'照片',key:'level',width:120},
  ]),
   // 学历、学位提升信息 
   f2:reactive([
    {label:'毕业院校',key:'schoolName',minWidth:120,},
    {label:'学习专业',key:'auditUser',minWidth:120,},
    {label:'学历水平',key:'examineState',width:120},
    {label:'学位名称',key:'getDate',width:260},
    {label:'学制',key:'level',width:80},
    {label:'学习形式',key:'level',width:160},
    {label:'最高',key:'level',width:180},
    {label:'师范',key:'level',width:120},
    {label:'师入学时间范',key:'level',width:120},
    {label:'照片',key:'level',width:120},
  ]),
   // 家庭成员
   f1:reactive([
    {label:'关系',key:'schoolName',minWidth:60,},
    {label:'姓名',key:'auditUser',minWidth:60,},
    {label:'性别',key:'examineState',width:60},
    {label:'身份证号',key:'getDate',width:260},
    {label:'名族',key:'level',width:80},
    {label:'工作单位',key:'level',width:160},
    {label:'联系电话',key:'level',width:180},
    {label:'照片',key:'level',width:120},
  ]),
   // 第3项：工作经历信息
   f3:reactive([
    {label:'工作单位',key:'schoolName',minWidth:120,},
    {label:'所在政区',key:'auditUser',minWidth:120,},
    {label:'当前工作',key:'examineState',width:120},
    {label:'开始时间',key:'getDate',width:260},
    {label:'结束时间',key:'level',width:120},
    {label:'工作职务',key:'level',width:160},
    {label:'照片',key:'level',width:120},

  ]),
   // 第4项：荣誉、证书信息 
   f4:reactive([
    {label:'荣誉名称',key:'schoolName',minWidth:60,},
    {label:'荣誉级别',key:'auditUser',minWidth:60,},
    {label:'同类最高',key:'examineState',width:60},
    {label:'颁发时间',key:'getDate',width:260},
    {label:'颁发部门',key:'level',width:80},
    {label:'颁发单位',key:'level',width:160},
    {label:'照片',key:'level',width:120},
  ]),
   // 第5项：职称资格、聘任信息
   f5:reactive([
    {label:'资格名称',key:'schoolName',minWidth:120,},
    {label:'资格级别',key:'auditUser',minWidth:120,},
    {label:'资格学段',key:'examineState',width:120},
    {label:'学科名称',key:'getDate',width:260},
    {label:'当前',key:'level',width:120},
    {label:'批准时间',key:'level',width:160},
    {label:'聘任级别',key:'level',width:180},
    {label:'聘任时间',key:'level',width:180},
      {label:'照片',key:'level',width:120},
  ]),
   // 第6项：个人参赛获奖信息
   f6:reactive([
    {label:'获奖名称',key:'schoolName',minWidth:120,},
    {label:'级别',key:'auditUser',minWidth:120,},
    {label:'等级',key:'examineState',width:120},
    {label:'作品类别',key:'getDate',width:260},
    {label:'颁发单位',key:'level',width:120},
    {label:'获奖日期',key:'level',width:160},
    {label:'照片',key:'level',width:120},
  ]),
   // 第7项：个人参加培训信息 
   f7:reactive([
    {label:'培训或教研活动名称',key:'schoolName',minWidth:220,},
    {label:'主办单位',key:'auditUser',minWidth:120,},
    {label:'培训地点',key:'examineState',width:120},
    {label:'培训时间',key:'getDate',width:120},
    {label:'天数',key:'level',width:80},
    {label:'培训级别',key:'level',width:120},
    {label:'培训类别',key:'level',width:120},
    {label:'照片',key:'level',width:120},
  ]),
 
}

let merbersTabData = reactive([])

// 监听是否查看
let refrashForm = ref(true)
watch(()=>props.isCheck,(newVal)=>{
  console.log(newVal);
  if(newVal === true){
    formlist.map(item => item.type = 'span')
    formlist.map(item => item.re = false)
    formlist2.map(item => item.type = 'span')
    formlist2.map(item => item.re = false)
  }else{
    formlist2  = JSON.parse(JSON.stringify(formlistcopy2)) 
    formlist  = JSON.parse(JSON.stringify(formlistcopy)) 
  }
    refrashForm.value = false
    nextTick(() =>{
      refrashForm.value = true
    })
  },{deep:true,immediate:true})

</script>
<style lang='scss' scoped>
 
.u-common-teacher-idCard-info{
  .title{
    text-align: center;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
  }
  .content{
    /* background: none; */
    .top{
      display: flex;
      .left{
        width: 75%;
      }
      .right{
        width: 25%;
        border: 1px solid;
        margin-left: 7px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    :deep(.is-guttered){
      padding: 0 !important;
    }
    :deep(.el-form-item) {
      border: 1px solid !important;
      margin-left: -1px; 
    }
    .footer{
      .footer-box{
        border: 1px solid;
        padding:12px;
        .header{
          height: 32px;
          color: red;
          font-size: 16px;
          line-height: 32px;
          text-align: center;
          font-weight: bold;
        }
      }

    }
  }
}
</style>
